<template>
  <div class="configuredRule">
    <el-card shadow="hover" class="card-search">
      <el-row>
        <el-col :span="20">
          <div class="search_detail">
            <div class="search">
              <span class="span_name">名称：</span>
              <el-input v-model="state.params.realName" placeholder="请输入" clearable />
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
          <el-button type="danger" :icon="Delete" @click="reast">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="hover" class="card-main">
      <el-button type="primary" :icon="CirclePlusFilled" @click="addmore">新增</el-button>
      <div class="lists">
        <div class="list">
          <div class="lists-img">
            <img :src="require('@@/pdf.png')" alt="">
          </div>
          <div class="list-block1">
            <div class="list-txt1">名称：</div>
            <div class="list-block2">
              <span class="list-txt2">上传时间：</span>
              <el-button type="danger" :icon="Delete" circle @click="DeletetPdf" />
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination background @current-change="changepage" layout="prev, pager, next" :total="state.totalPage" />
      </div>
    </el-card>
    <el-dialog :close-on-click-modal="false" v-model="state.dialogVisible" title="学员管理" width="760px"
      :before-close="handleClose">
      <div class="inputa">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
          :size="formSize" status-icon>
          <el-form-item label="文件名称：" prop="username">
            <el-input style="width: 430px" v-model="ruleForm.username" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="文件：" prop="region">
            <el-upload accept=".pdf" :before-upload="beforeAvatarUpload" v-model:file-list="fileList"
              class="upload-demo" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :on-change="handleChange">
              <el-button type="primary">点击上传</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  只能选择PDF
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetForm()">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { Delete, Search, CirclePlusFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const { proxy } = getCurrentInstance();
const ruleFormRef = ref()
const state = reactive({
  dialogVisible: false,
  dialogVisibleBjkb: true,
  choseCalendarValue: '',//选择的日期日期
  options: [],
  name: '',
  time: '',
  tableData: [{ username: 'cfvdf' }],
  page: 1,
  totalPage: 0,
  row: {},
  params: {
    monthStatus: '',
    realName: '',
    roleId: '',
    time: ['', ''],
    startDate: '',
    endDate: '',
  },
})

const formSize = ref('default')
const ruleForm = reactive({
  username: '',
  realName: '',
  mobile: '',
  password: '',
  region: '',
  sation: true,
  status: 1,
  roleIdList: [],
})

const rules = reactive({
  username: [
    { required: true, message: '不能为空', trigger: 'blur' },
  ],
  realName: [
    { required: true, message: '不能为空', trigger: 'blur' },
  ],
  mobile: [
    { required: true, message: '不能为空', trigger: 'blur' },
  ],
  // password: [
  //     { required: true, message: '不能为空', trigger: 'blur' },
  // ],
  sation: {
    required: true,
    message: '请选择',
    trigger: 'change',
  },
  region: {
    required: true,
    message: '请选择',
    trigger: 'change',
  },
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
})

const changepage = (e) => {
  state.page = e
  getData()
}

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'pdf') {
    ElMessage.error('请选择pdf!')
    return false
  }
  return true
}



const getData = async () => {
}
getData(state.page)
const getSelect = async () => {
  let res = await proxy.$api.home.roleList()
  state.options = res.data
}
getSelect()
const search = () => {
  console.log('state', state.params);
  state.params.startDate = state.params.time[0]
  state.params.endDate = state.params.time[1]
  getData(state.page)
}
const reast = () => {
  state.params = {
    monthStatus: '',
    realName: '',
    time: ['', ''],
    startDate: '',
    endDate: '',
  }
  getData(state.page)
}
const addmore = () => {
  state.dialogVisible = true
}

const DeletetPdf = async (row) => {
  ElMessageBox.confirm('是否此角色？', '删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    customClass: 'mis-msg-prompt'
  })
    .then(() => {
      proxy.$api.home.userDelet([row.id]).then(() => {
        ElMessage.success('删除成功!')
        getData()
      })
    })
    .catch(() => { })
}


const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!', ruleForm)
      ruleForm.roleIdList[0] = ruleForm.region
      ruleForm.sation === true ? ruleForm.status = 1 : ruleForm.status = 0
      console.log('ruleForm.id !=', ruleForm.id != '');
      if (ruleForm.id) {
        proxy.$api.home.userput(ruleForm).then(res => {
          console.log('res', res)
          if (res.msg === 'success') {
            ElMessage.success('修改成功!')
            state.dialogVisible = false
            resetForm()
            getData()
          }
        })
      } else {
        proxy.$api.home.userSave(ruleForm).then(res => {
          console.log('res', res)
          if (res.msg === 'success') {
            ElMessage.success('添加成功!')
            state.dialogVisible = false
            resetForm()
            getData()
          }
        })
      }

    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.resetFields()
  setTimeout(() => {
    state.dialogVisible = false
  }, 200);
}
</script>

<style lang="scss" scoped>
.configuredRule {
  padding: 20px;

  .search_detail {
    display: flex;

    .search {
      margin-right: 10px;
      display: flex;
      align-items: center;

      .span_name {
        width: 110px;
        font-size: 16px;
      }
    }
  }

  .card-main {
    margin-top: 20px;
    height: calc(100vh - 200px);
    position: relative;

    .pagination {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
      text-align: right;
    }
  }
}

:deep(.el-calendar__body) {
  height: 100%;
}

:deep(.el-calendar-table) {
  height: 100%;
}

:deep(.el-calendar-day) {
  height: 100%;
}

.lists {
  margin-top: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .list {
    margin: 8px 1%;
    padding: 5px 5px;
    width: 230px;
    height: 230px;
    background: #F8F8F8;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    border: 1px solid #EAEAEA;
  }

  .lists-img {
    text-align: center;
    width: 100%;
    height: 127px;
    background: #FFFFFF;
    border-radius: 5px 5px 0px 0px;

    img {
      width: 88px;
    }
  }

  .list-block1 {
    margin-top: 5px;
    width: 100%;
    // height: 127px;
    background: #FFFFFF;
    border-radius: 5px 5px 0px 0px;
    padding: 5px 10px;

    .list-txt1 {
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      color: #333333;
    }

    .list-block2 {
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: space-between;

      .list-txt2 {
        font-size: 12px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        color: #A1A1A1;
      }
    }
  }


}
</style>